<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="section-header">用户增长趋势</div>
    <div v-show="!jz">
      <div ref="charts" :style="chartsDom" ></div>
    </div>
    <div class="container_jz" :style="chartsDom"  v-if="jz">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
  </div>
</template>
<script>
import { getBehavioralHotspots } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height-30 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })

  },
  methods: {
    init(){
      this.jz=true
      getBehavioralHotspots(this.dateProp)
      .then(({data:{data}})=>{
        this.chartData = data;
        this.jz=false
        this.drawChart(data);
      })
    },
    drawChart(dataa) {
      let option = {
        color:['#FF4500', '#00FF00', '#FF00FF',"#FFFF00"],
    tooltip: {
        trigger: 'axis',
        transitionDuration:0,
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
     textStyle:{
       color:['#FF4500', '#00FF00', '#FF00FF',"#FFFF00"]
     },
	 itemWidth:80,
        data: ['登记求职者', '备案用人单位', '活跃求职者', '活跃用人单位']
    },
    grid: {
        left: '3%',
        top:'15%',
        right: '4%',
        bottom: '20%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {//坐标轴刻度相关设置。
                show: false
            },
            data: dataa.xaxis
        }
    ],
    yAxis: [
        {
            type: 'value',
             axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {//坐标轴刻度相关设置。
                show: false
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线
                show: false,
            }
        }
    ],
    series: [
        {
            name: '登记求职者',
            type: 'line',
            areaStyle: {},
            smooth: 0.6,
            data: dataa.registered_jobseeker
        },
        {
            name: '备案用人单位',
            type: 'line',
            areaStyle: {},
            smooth: 0.6,
            data: dataa.registered_enterprise
        },
        {
            name: '活跃求职者',
            type: 'line',
            areaStyle: {},
            smooth: 0.6,
            data: [...dataa.active_jobseeker]
        },
        {
            name: '活跃用人单位',
            type: 'line',
            areaStyle: {},
            smooth: 0.6,
            data: dataa.active_enterprise
        }
    ]
};

      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
       chartsInit.dispatchAction({
          type: 'showTip',
          seriesIndex:0  // 显示第几个series
          // dataIndex: 8 // 显示第几个数据
      });
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
  
</style>